<route>
{
meta: {
title: '设备耗材申请'
}
}
</route>
<template>
    <div class="app-container"
         style="margin-left: 20px; margin-right: 20px;margin-top: 35px;">
        <el-row>
            <el-col :span="24">
                <!--                模糊搜索-->
                <el-form :model="applicationInfoQueryParams"
                         ref="queryFormRef"
                         :inline="true"
                         label-width="90px">
                    <el-form-item label="设备名称"
                                  prop="equipment_name">
                        <el-input v-model="applicationInfoQueryParams.equipment_name"
                                  placeholder="请输入设备名称"
                                  clearable
                                  @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary"
                                   :icon="Search"
                                   @click="handleQuery"
                                   round
                                   plain>搜索
                        </el-button>
                        <el-button :icon="Refresh"
                                   @click="resetQuery"
                                   round
                                   plain>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-divider>
            <el-icon>
                <star-filled/>
            </el-icon>
        </el-divider>
        <!--        表单-->
        <el-table :data="equipApplicationInfo">
            <el-table-column fixed=""
                             type="index"
                             label="序号"
                             :index="pageNum"/>

            <el-table-column prop="id"
                             label="设备ID"/>

            <el-table-column prop="equipment_name"
                             label="设备名称"/>

            <el-table-column prop="application_number"
                             label="申请数量"/>

            <el-table-column prop="application_time"
                             label="申请时间"/>

            <el-table-column prop="back_time"
                             label="归还时间"/>

            <el-table-column prop="application_reason"
                             label="申请理由"/>

            <el-table-column  prop="application_status"
                             label="申请状态"/>

            <el-table-column fixed="right"
                             label="操作"
                             width="120">
                <template #default="scope">
                    <el-button type="warning"
                               size="small"
                               @click="handleDetails(scope.row)">撤销
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <pagination
            v-show="total> 0"
            :total="total"
            v-model:page="applicationInfoQueryParams.pageNum"
            v-model:limit="applicationInfoQueryParams.pageSize"
            @pagination="getList"
        />

        <!-- 确认预约信息表单 -->
        <el-dialog title="确认预约信息"
                   v-model="operForm.addAppointmentOpen"
                   width="500px"
                   append-to-body>
            <el-form :model="operForm.applicationEquipment"
                     ref="queryFormRef"
                     label-width="100px">
                <el-form-item label="设备ID"
                              prop="equipment_id">
                    <el-input v-model="operForm.applicationEquipment.equipment_id"/>
                </el-form-item>
                <el-form-item label="设备名称"
                              prop="equipment_name">
                    <el-input v-model="operForm.applicationEquipment.equipment_name"/>
                </el-form-item>

                <!--                <el-form-item label="设备类型"-->
                <!--                              prop="equipment_type">-->
                <!--                    <el-input v-model="operForm.applicationEquipment.equipment_type"/>-->
                <!--                </el-form-item>-->
                <el-form-item label="申请人名字"
                              prop="application_name">
                    <el-input v-model="operForm.applicationEquipment.application_name"/>
                </el-form-item>
                <el-form-item label="申请人手机号"
                              prop="application_phone">
                    <el-input v-model="operForm.applicationEquipment.application_phone"/>
                </el-form-item>
                <el-form-item label="申请数量"
                              prop="application_number">
                    <el-input v-model="operForm.applicationEquipment.application_number"/>
                </el-form-item>
                <el-form-item label="归还时间" prop="back_time">
                    <el-date-picker
                        @on-change="operForm.applicationEquipment.back_time"
                        v-model="operForm.applicationEquipment.back_time"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="date"
                        placeholder="请输入日期"
                    />
                </el-form-item>
                <el-form-item label="申请理由"
                              prop="application_reason">
                    <el-input v-model="operForm.applicationEquipment.application_reason"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary"
                               @click="submitApplicationEquipment()">确 定
                    </el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script lang="ts" setup>
import {
    StarFilled,
    Edit,
    Share,
    Delete,
    Search,
    Upload,
    Refresh,
    Plus,
    User,
} from '@element-plus/icons-vue'
import {
    defineComponent,
    onMounted,
    reactive,
    toRef,
    ref,
    computed,
    toRefs,
    getCurrentInstance,
} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import api from '@/api'

const equipApplicationInfo = ref([])
const loading = ref(true)
const queryFormRef = ref(null)
const open = ref(false)
const title = ref('')
const pageNum = ref(1)
const total = ref(1)

/**增加或修改表单数据 */
const operForm = ref({
    // 弹出对话框
    addAppointmentOpen: false,
    //添加申请信息
    applicationEquipment: {
        equipment_id: undefined,
        equipment_name: undefined,
        application_name: undefined,
        application_phone: undefined,
        application_number: 0,
        back_time: undefined,
        application_reason: undefined
    },
    //查询预约信息
    appointment: [],
})

/**查询条件 */
const applicationInfoQueryParams = ref({
    condition1: undefined,
    username: localStorage.getItem("account"),
    pageNum: 1,
    pageSize: 6,
})

/**初始化条件 */
const initParams = ref({
    username: localStorage.getItem("account"),
    pageNum: 1,
    pageSize: 6,
})
/**获取表单数据*/
const getList = () => {
    loading.value = true
    api.post('/equipment/selectEquipApplicationInfo', applicationInfoQueryParams.value).then((res) => {
        loading.value = false
        total.value = res.data.total
        equipApplicationInfo.value = res.data.list
        console.log('tableData=', equipApplicationInfo.value)
    })
}
/**初始化条件*/
const initList = () => {
    loading.value = true
    api.post('/equipment/selectEquipApplicationInfo', initParams.value).then((res) => {
        loading.value = false
        total.value = res.data.total
        equipApplicationInfo.value = res.data.list
        console.log('tableData=', equipApplicationInfo.value)
    })
}

/** 搜索按钮操作 */
function handleQuery() {
    pageNum.value = 1
    getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
}
/** 详情按钮操作 */
const handleDetails = (row) => {
    // 打开对话框
    operForm.value.addAppointmentOpen = true

    // 属性赋值
    operForm.value.applicationEquipment.equipment_id = row.id
    operForm.value.applicationEquipment.equipment_name = row.equipment_name
    operForm.value.applicationEquipment.application_name = localStorage.getItem("account")
    console.log("打开了" )
    console.log("row --> "  + row)
    console.log("打开了 设备ID-->" + row.equipment_name)
    //添加预约信息前置参数
    title.value = '添加实验室'
}

/**提交预约表单 */
const submitApplicationEquipment = () => {
    api
        .post('equipment/applicationEquipment', operForm.value.applicationEquipment)
        .then((res) => {
            console.log("res.msg-----"+res.msg)

            console.log("res.code---->" + res.code);
            console.log("res.code == 0---->" + res.code == 0);
            if(res.code == 0) {
                //成功
                ElMessage.success(res.msg);
            } else {
                ElMessage.error(res.msg);
            }

            operForm.value.addAppointmentOpen = false
            getList();
        })
}
/** 取消按钮 */
function cancel() {
    operForm.value.addAppointmentOpen = false
    open.value = false
}

getList();
</script>
<style scoped>
.edit_btn {
    min-height: 90px;
    max-width: 150px;
}
</style>

